<template>
	<view>
		<view class="index">
			<!-- 搜索框 -->
			<view class="search" @click="send">
				<u-search bg-color="white" :show-action="false" shape="round" placeholder-color="#999999"
					placeholder="" v-model="keyword"></u-search>
					<!-- 搜索框右侧两个小图标 -->
				<view class="title-icon">
					<u-image width="20px" height="20px" src="../../static/images/Headphones.png"></u-image>
					<u-image width="20px" height="20px" src="../../static/images/user.png"></u-image>
				</view>
			</view>
			<!-- 轮播图 -->
			<view class="banner">
				<v-banner></v-banner>
			</view>
			<!-- 家具类型 -->
			<view>
				<v-homeType :type='type'></v-homeType>
			</view>
			<!-- 精品专区 -->
			<view class="area">
				<u-section :font-size="29" :show-line="false" title="精品专区" sub-title=""></u-section>
			</view>
			<!-- 精品专区列表 -->
			<view class="area-list">
				<v-srcollx :width="350" :height="173"></v-srcollx>
			</view>
		</view>


		<!-- vip -->
		<view class="getvip">
			<view class="vip-header">
				<text>开通家电VIP</text>
				<view class="icon">
					<text>会员中心</text>
					<uni-icons type="arrowright" size="10" color="white"></uni-icons>
				</view>
			</view>
			<view class="content-text">
				<text style="width: 100%;">购物立享超值优惠</text>
				<text style="width: 100%;">现实特惠！今日小天鹅洗衣机洗衣机会员仅￥1699</text>
			</view>
		</view>
		<!-- 间隔槽 -->
		<u-gap height="12" bg-color="#EDEDED"></u-gap>
		
		<!-- 会员秒杀 -->
		<view class="vip-Easily">
			<view class="easily-title">
				<view>
					<text>会员秒杀</text>
					<view class="icon">
						<text>18点场</text>
					</view>
					<!-- 倒计时 -->
					<text style="color: #2791B0;">
						<u-count-down :timestamp="timestamp"></u-count-down>
					</text>
				</view>
				<uni-icons type="arrowright" size="10"></uni-icons>
			</view>
			<text style="color: #666666;margin: 10upx 0;">
				每日低价秒杀
			</text>
			
			<!-- 商品图片价格区域 -->
			<v-srcolls :list="list"></v-srcolls>
		</view>
		
		<!-- 结尾 -->
	</view>




</template>

<script>
	import banner from '../../components/banner.vue'
	import homeType from '../../components/homeType.vue'
	import scrollX from '../../components/scroll-x.vue'
	import scroll2 from '../../components/scroll-x2.vue'
	export default {
		components: {
			'v-banner': banner,
			'v-homeType': homeType,
			'v-srcollx': scrollX,
			'v-srcolls': scroll2
		},
		data() {
			return {
				keyword: '洗衣机/吹风机',
				// 轮播图数据
				// banner:[
				// 	{"src":"url:require('../static/images/banner.png')"},
				// 	{"src":"url:require('../static/images/banner.png')"},
				// 	{"src":"url:require('../static/images/banner.png')"},
				// 	{"src":"url:require('../static/images/banner.png')"},
				// 	{"src":"url:require('../static/images/banner.png')"},
				// 	{"src":"url:require('../static/images/banner.png')"}
				// ],
				// 家具类型数据
				type: [{
						src: "../../static/images/conditioning.png",
						name: "空调",
						id:23
					},
					{
						src: "../../static/images/Refrigerator.png",
						name: "冰箱",
						id:57
					},
					{
						src: "../../static/images/Washingmachines.png",
						name: "洗衣机",
						id:42
					},
					{
						src: "../../static/images/weiyu.png",
						name: "厨房卫浴",
						id:333
					},
					{
						src: "../../static/images/linght.png",
						name: "家装照明",
						id:598
					},
				],
				list:[
					{src:"../../static/images/miao-1.png",price:'1499',price1:"1699"},
					{src:"../../static/images/miao-2.png",price:'149',price1:"169"},
					{src:"../../static/images/miao-3.png",price:'999',price1:"1780"},
					{src:"../../static/images/miao-4.png",price:'265',price1:"300"},
					{src:"../../static/images/miao-5.png",price:'230',price1:"320"},
				],
				// 倒计时
				timestamp: 86400,
			}
		},

		methods: {
			// 跳到搜索页面
			send(){
				uni.navigateTo({
					url:'/subpag/search/search',
				})
			}
		},
		created() {
			console.log(
			localStorage.getItem('cart') !== null )
		}

	}
</script>

<style scoped lang="scss">
	// 
	.area {
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.title-icon {
		width: 100upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100%;
	}

	.search {
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.index {
		padding: 30upx 30upx;
		background-color: #F7F7F7;
	}

	// vip 模块
	.getvip {
		padding: 10px 30upx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: left;
.content-text{
	display: flex;
	flex-direction:column;
	width: 100%;
	font-size: 20upx;
	color: #666666;
	font-family: FangSong_GB2312;
}
		.vip-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			text {
				font-weight: 600;
				font-size: 30upx;
				color: #333333;
			}

			.icon {
				width: 182upx;
				height: 46upx;
				background-color: #7DBDD0;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				border-radius: 10px;
				text {
					font-size: 30upx;
					color: white;
				}
			}
		}
	}
	
	// 会员秒杀
	.vip-Easily{
		width: 100%;
		display: flex;
		flex-direction: column;
		padding:10px 30upx;
		// 标题
		.easily-title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: Helvetica;
			view{
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
			text{
				font-weight: 600;
			}
			.icon{
				width: 82upx;
				height: 30upx;
				background-color: #2791B0;
				border-radius: 10px;
				color: white;
				font-size: 10upx;
				margin: 0 15upx;
				text{
					transform: scale(.8);
				}
			}
		}
	}
</style>
